<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <button class="btn1">点击隐藏</button>
    <button class="btn2">点击显示</button>
    <button class="btn3">点击切换</button><br>
    <button class="btn4">点击上拉</button>
    <button class="btn5">点击下拉</button>
    <button class="btn6">点击切换</button><br>
    <button class="btn7">渐隐</button>
    <button class="btn8">渐现</button>
    <button class="btn9">切换</button><br>
    <button class="btn10">自定义动画</button><br>
    <script>
        $(".btn1").click(function(){
            $("div").hide();
        });
        $(".btn2").click(function(){
            $("div").show();
        });
        $(".btn3").click(function(){
            $("div").toggle();
        });
        $(".btn4").click(function(){
            $("div").slideUp();
        });
        $(".btn5").click(function(){
            $("div").slideDown();
        });
        $(".btn6").click(function(){
            $("div").slideToggle(1000,function(){
                console.log(11111111111);
            });
        });
        $(".btn7").click(function(){
            $("div").fadeOut(1000,function(){
                console.log(11111111111);
            });
        });
        $(".btn8").click(function(){
            $("div").fadeIn(1000,function(){
                console.log(222222222);
            });
        });
        $(".btn9").click(function(){
            $("div").fadeToggle(1000,function(){
                console.log(222222222);
            });
        });
        $(".btn10").click(function(){
            $("div").animate({width:200,height:200},5000,function(){
                console.log("动画完成");
            });
            setTimeout(()=>{
                $("div").stop();
            },3000);
        });
    </script>
</body>
</html>